<template>
  <view class="user-connections">
    <TImage width="128rpx" height="128rpx" border-radius="50%" :src="data.avatar"></TImage>
    <view class="user-info">
      <view class="name-tag">
        <text class="name text-overflow-1">{{ data.name || '未填写' }}</text>
        <CustomTag
          v-if="data.memberLevelName"
          :text="data.memberLevelName"
          padding="4rpx 12rpx"
          color="#EA5E0E"
          background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
          font-size="24rpx"
          line-height="32rpx"
        />
      </view>
      <view class="job-info">
        <view class="text-overflow-1" style="width: 152rpx; min-width: 152rpx">
          {{ data.companyPositionName || '未填写' }}
        </view>
        <view>|</view>
        <view class="text-overflow-1">{{ data.companyName || '未填写' }}</view>
      </view>
      <!-- <view class="view-message">ta刚刚看过你的信息</view> -->
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import type { RegisterIdAppUserInfo } from '@/api/activity/types';
  import type { PropType } from 'vue';
  const props = defineProps({
    data: {
      type: Object as PropType<RegisterIdAppUserInfo>,
      default: () => ({}),
    },
  });
</script>
<style lang="scss" scoped>
  .user-connections {
    display: flex;
    align-items: center;
    gap: 24rpx;
    .user-info {
      display: flex;
      flex-direction: column;
      // gap: 16rpx;
      justify-content: space-between;
      .name-tag {
        display: flex;
        align-items: center;
        gap: 8rpx;
        .name {
          color: #333;
          text-overflow: ellipsis;
          font-size: 28rpx;
          font-weight: bold;
          line-height: 40rpx;
        }
      }
      .job-info {
        display: flex;
        align-items: center;
        gap: 20rpx;
        color: #333;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .view-message {
        color: #969799;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }
  }
</style>
